<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>简博客-文章页面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.jpg">
<link rel="shortcut icon" href="images/icon/icon.jpg">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

<!-- Markdown -->
<link rel="stylesheet" href="css/editormd.min.css" />
<link rel="stylesheet" href="css/editormd.preview.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<!--[if gte IE 9]>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>

<body class="user-select single">
<header class="header">
  <nav class="navbar navbar-default" id="navbar">
    <div class="container">
      <div class="header-topbar hidden-xs link-border">
        <ul class="site-nav topmenu">
          <li><a href="links.html" rel="nofollow">友情链接</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" rel="nofollow">关于作者<span class="caret"></span></a>
            <ul class="dropdown-menu header-topbar-dropdown-menu">
              <li><a data-toggle="modal" data-target="#WeChat" rel="nofollow"><i class="fa fa-weixin"></i> 微信</a></li>
              <li><a href="https://www.jianshu.com/u/31ccce39a24b" target="_blank" rel="nofollow"><i class="fa fa-weibo"></i> 简书</a></li>
              <li><a href="https://www.cnblogs.com/smfx1314/" target="_blank" rel="nofollow"><i class="fa fa-rss"></i> 博客园</a></li>
              <li><a href="https://github.com/smfx1314" target="_blank" rel="nofollow"><i class="fa fa-rss"></i> GitHub</a></li>
            </ul>
          </li>
        </ul>
        <a data-toggle="modal" data-target="#loginModal" class="login" rel="nofollow">Hi,你好</a>&nbsp;&nbsp;</div>
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <h1 class="logo hvr-bounce-in"><a href="" title=""><img src="images/logo.png" alt=""></a></h1>
      </div>
      <div class="collapse navbar-collapse" id="header-navbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a data-cont="首页" href="index.html">首页</a></li>
          <li><a href="tags.html">标签</a></li>
          <li><a href="readerinfo.html">留言</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<section class="container">
  <div class="content-wrap">
    <div class="content">
      <header class="article-header">
        <h1 class="article-title" id="blog_title"  title="文章标题"></h1>
        <div class="article-meta"> 
          <span class="item article-meta-time">
            <time class="time" data-toggle="tooltip" data-placement="bottom" title="时间">
              <i class="glyphicon glyphicon-time" id="blog_time"></i>
            </time>
          </span>
        </div>
      </header>
      <article class="article-content">
        <div id="test-editormd-view">
            <textarea id="blog_content" style="display:none"></textarea>          
        </div>
      </article>
      <div class="article-tags">标签：<a href="#" rel="tag" id="blog_tags"> </a></div>
      <div class="title" id="comment">
        <h3>评论 <small>抢沙发</small></h3>
      </div>
      <div id="respond">
        <form action="" method="post" id="comment-form">
          <div class="comment">
            <div class="comment-title"><img class="avatar" src="images/icon/icon.jpg" alt="" /></div>
            <div class="comment-box">
              <textarea placeholder="您的评论可以一针见血" name="comment" id="comment-textarea" cols="100%" rows="3" tabindex="1" ></textarea>
              <div class="comment-ctrl"> <span class="emotion"><img src="images/face/5.png" width="20" height="20" alt="" />表情</span>
                <div class="comment-prompt"> <i class="fa fa-spin fa-circle-o-notch"></i> <span class="comment-prompt-text"></span> </div>
                <input type="hidden" value="1" class="articleid" />
                <button type="submit" name="comment-submit" id="comment-submit" tabindex="5" articleid="1">评论</button>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div id="postcomments">
      	<!-- 评论 -->
        <!-- <ol class="commentlist">
          <li class="comment-content"><span class="comment-f">#1</span>
            <div class="comment-avatar"><img class="avatar" src="images/icon/icon.jpg" alt="" /></div>
            <div class="comment-main">
              <p><span class="address">王二狗</span><span class="time">(2016-01-06)</span><br />
                这是匿名评论的内容这是匿名评论的内容</p>
            </div>
          </li>
        </ol> -->

		<!-- 添加一个容器 -->
		<div id="gitalk-container"></div>
        
        <div class="quotes"><span class="disabled">首页</span><span class="disabled">上一页</span><a class="current">1</a><a href="">2</a><span class="disabled">下一页</span><span class="disabled">尾页</span></div>
      </div>
    </div>
  </div>
  <aside class="sidebar">
    <div class="widget widget_sentence">
      <h3>热门阅读</h3>
      <div class="widget-sentence-content">
        <h4>2019年01月05日星期二</h4>
        <p>开发中</p>
      </div>
    </div>
    
  </aside>
</section>
<footer class="footer">
  <div class="container">
    <p>&copy; 2016 <a href="">简blog</a> &nbsp; <a href="#" target="_blank" rel="nofollow">豫ICP备20151109-1</a> &nbsp; &nbsp; <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
  </div>
  <div id="gotop"><a href="#" class="gotop"></a></div>
</footer>
<!--微信二维码模态框-->
<div class="modal fade user-select" id="WeChat" tabindex="-1" role="dialog" aria-labelledby="WeChatModalLabel">
  <div class="modal-dialog" role="document" style="margin-top:120px;width:280px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="WeChatModalLabel" style="cursor:default;">微信扫一扫</h4>
      </div>
      <div class="modal-body" style="text-align:center"> <img src="images/weixin.jpg" alt="" style="cursor:pointer"/> </div>
    </div>
  </div>
</div>
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.ias.js"></script> 
<script src="js/scripts.js"></script> 
<script src="js/jquery.qqFace.js"></script> 
<script src="js/marked.min.js"></script>
<script src="js/prettify.min.js"></script>
<script src="js/raphael.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/sequence-diagram.min.js"></script>
<script src="js/flowchart.min.js"></script>
<script src="js/jquery.flowchart.min.js"></script>
<script src="js/editormd.js"></script>



<script type="text/javascript">
$(function(){
	/**
	 * 生成 gitalk 插件
	 * @type {Gitalk}
	 */
	var gitalk = new Gitalk({
	  clientID: '56f73fbc5e79a466ea62', //Client ID
	  clientSecret: '26d8eb4f3b0de9ce02382103ffc32ba34c4671f4', //Client Secret
	  repo: 'blogtalk',//仓库名称
	  owner: 'smfx1314',//仓库拥有者
	  admin: ['smfx1314'],
	  id: location.href,      // Ensure uniqueness and length less than 50
	  distractionFreeMode: false  // Facebook-like distraction free mode
	})

	gitalk.render('gitalk-container')

	$('.emotion').qqFace({
		id : 'facebox', 
		assign:'comment-textarea', 
		path:'images/arclist/'	//表情存放的路径
	});

	

  /**
   * 获取url中的id,然后根据id查询contents详情
   */
    function getQueryVariable(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("?");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
    }

  /**
     * 根据id获取博客内容contents信息
     */
    //声明contents
    var contentsDo;
    $(document).ready(function(){
      
        //获取商品详情
        $.ajax({
            url:"http://localhost:8081/contents/getById",
            type:"GET",
            xhrFields:{
              widthCredentials:true
            },
            data:{
                "id":getQueryVariable("id")
            },
            success:function (result) {
                if (0 == result.code){
                    contentsDo = result.data;
                    reloadDom();
                } else {
                    alert("注册失败");
                }
            }
        });
    });

    function reloadDom(){
      $("#blog_title").text(contentsDo.title);
      $("#blog_time").text(contentsDo.created);
      //$("#blog_content").text(contentsDo.content);
      $("#blog_tags").text(contentsDo.tags);

      /**
       * 解析Markdown
       * @type {String}
       */
      var testEditormdView = editormd.markdownToHTML("test-editormd-view", {
            markdown        : contentsDo.content,// $("#append-test").text(),
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            tocm            : true,    // Using [TOCM]
            markdownSourceCode : false, //// 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    };
});
</script>
</body>
</html>